<template>
  <div class="GroupSelector">
    <!-- 宿舍楼选择 -->
    <div class="selector-item" v-if="selectorData.buildingId !== undefined">
      <span class="label">楼栋</span>
      <el-select v-model="groupData.buildingId" placeholder="请选择" clearable>
        <el-option
          v-for="item in buildingsData"
          :key="item.id"
          :label="item.name + item.region"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 宿舍楼选择 -->

    <!-- 楼层选择 -->
    <div class="selector-item" v-if="selectorData.floorId !== undefined">
      <span class="label">楼层</span>
      <el-select
        v-model="groupData.floorId"
        placeholder="全部"
        :disabled="!groupData.buildingId"
        clearable
      >
        <el-option
          v-for="item in floorsData"
          :key="item.id"
          :label="item.layer"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 楼层选择 -->

    <!-- 房间选择 -->
    <div class="selector-item" v-if="selectorData.roomId !== undefined">
      <span class="label">房间号</span>
      <el-select
        v-model="groupData.roomId"
        placeholder="全部"
        :disabled="!groupData.floorId"
        clearable
      >
        <el-option
          v-for="item in roomsData"
          :key="item.id"
          :label="item.number"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 房间选择 -->
    <!-- 日期选择 -->
    <!-- <div class="selector-item">
      <span class="label">日期范围</span>
      <el-date-picker
        v-model="dateRange"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        @change="handleDateRangeChange"
      >
      </el-date-picker>
    </div> -->
    <!-- 日期选择 -->

    <!-- 学生选择 -->
    <div class="selector-item" v-if="selectorData.userId !== undefined">
      <span class="label">学生</span>
      <el-select
        v-model="groupData.userId"
        placeholder="请选择"
        :disabled="!groupData.roomId"
        clearable
      >
        <el-option
          v-for="item in usersData"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 学生选择 -->
  </div>
</template>

<script>
import { getManageBuildings } from '@/api/building'

import { getFloors } from '@/api/floor'
import { getRooms } from '@/api/room'
export default {
  name: 'GroupSelector',
  model: {
    prop: 'selectorData',
    event: 'selected'
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      groupData: {
        buildingId: null,
        floorId: null,
        roomId: null
      },
      buildingsData: [],
      floorsData: [],
      roomsData: [],
      usersData: [],
      dateRange: [], // 用于存储日期选择器的值
      strTime: '', // 存储开始日期
      endTime: '' // 存储结束日期
    }
  },
  props: {
    selectorData: {
      type: Object,
      required: true
    }
  },
  watch: {
    'groupData.buildingId': function() {
      this.groupData.floorId = null
      this.groupData.roomId = null
      this.groupData.userId = null
      this.fetchFloorsData()
    },
    'groupData.floorId': function() {
      this.groupData.roomId = null
      this.groupData.userId = null
      this.fetchRoomsData()
    },
    'groupData.roomId': function() {
      this.groupData.userId = null
    },
    groupData: {
      deep: true,
      handler(newVal) {
        for (let key in this.selectorData) {
          this.selectorData[key] = newVal[key]
        }
      }
    }
  },
  mounted() {
    this.fetchBuildingsData()
  },
  methods: {
    async fetchBuildingsData() {
      getManageBuildings().then(res => {
        this.buildingsData = res.data.buildings
      })
    },
    async fetchFloorsData() {
      getFloors({ buildingId: this.groupData.buildingId }).then(res => {
        this.floorsData = res.data.floors
      })
    },
    async fetchRoomsData() {
      this.roomsData = []
      getRooms({ floorId: this.groupData.floorId }).then(res => {
        if (res.data.role == 'superAdmin') {
          this.roomsData = res.data.rooms
        }
        if (res.data.role == 'admin') {
          for (var i = 0; i < res.data.rooms.length; i++) {
            if (res.data.rooms[i].userId == res.data.userId) {
              this.roomsData.push(res.data.rooms[i])
            }
          }
        }
      })
    },
    handleDateRangeChange(value) {
      if (value) {
        this.strTime = value[0].format('yyyy-MM-dd HH:mm:ss') // 格式化开始日期
        this.endTime = value[1].format('yyyy-MM-dd HH:mm:ss') // 格式化结束日期
      } else {
        this.strTime = ''
        this.endTime = ''
      }
      // 触发事件，将日期范围发送到父组件
      this.$emit('date-selected', {
        strTime: this.strTime,
        endTime: this.endTime
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.GroupSelector {
  display: flex;
  margin: 0 -10px;
  .selector-item {
    display: flex;
    align-items: center;
    margin: 0 10px;
    span {
      margin-right: 10px;
    }
  }
}
</style>
